<template>
  <div>
    <!--  查询 -->
    <div>
      <el-input placeholder="请输入客户姓名" style="width:200px" v-model="queryName"></el-input>
      <el-button @click="queryByName" type="success" plain>查询</el-button>
      <el-button @click="showCheckOutDialog" type="primary" style="width: 100px; margin-left: 50px;font-weight: bolder; font-size: 16px">
        退&emsp;住
      </el-button>
    </div>
    <!--  显示所有退住记录 -->
    <div>{{errorMessage}}</div>
    <el-table :data="backdownList">
      <el-table-column label="序号" type="index" width="60px"></el-table-column>
      <el-table-column prop="customerName" label="客户姓名" width="80px"></el-table-column>
      <el-table-column prop="retreattime" label="退住时间" width="120px" :formatter="formatDate"></el-table-column>
      <el-table-column prop="retreattype" label="退住类型" width="120px">
        <template #default="scope">
          <span v-if="scope.row.retreattype === 0">正常退住</span>
          <span v-else-if="scope.row.retreattype === 1">死亡退住</span>
          <span v-else-if="scope.row.retreattype === 2">保留床位</span>
        </template>
      </el-table-column>
      <el-table-column prop="retreatreason" label="退住原因" width="150px"></el-table-column>
      <el-table-column prop="auditstatus" label="审批状态" width="100px">
        <template #default="scope">
          <span v-if="scope.row.auditstatus === 0">已提交</span>
          <span v-else-if="scope.row.auditstatus === 1">同意</span>
          <span v-else-if="scope.row.auditstatus === 2">拒绝</span>
        </template>
      </el-table-column>
      <el-table-column prop="auditperson" label="审批人" width="100px"></el-table-column>
      <el-table-column prop="audittime" label="审批时间" width="120px" :formatter="formatDate"></el-table-column>
      <el-table-column prop="remarks" label="备注" width="150px"></el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="primary" @click="showEditDialog(scope.row.id)">修改</el-button>
<!--          <el-button type="danger" @click="removeOne(scope.row.id)">删除</el-button>-->
        </template>
      </el-table-column>
    </el-table>

    <div class="example-pagination-block">
      <el-pagination background
                    :current-page="pageContains.pageNum"
                    :page-size="pageContains.pageSize"
                    :page-sizes="[10,20,30,50,100]"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pageContains.total"
                    @size-change="handleSizeChange"
                    @current-change="handlePageChange"
      />
    </div>

    <!--  退住登记对话框 -->
    <el-dialog v-model="backdownDialog" :title="dialogTitle">
      <el-form :model="curBackdown">
        <el-form-item label="客户信息">
          <el-col :span="11">
            <el-select v-model="curBackdown.customerId" filterable placeholder="请选择客户">
              <el-option
                  v-for="item in customerOptions"
                  :key="item.id"
                  :label="item.customerName"
                  :value="item.id"
              />
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item label="退住时间">
          <el-col :span="11">
            <el-date-picker v-model="curBackdown.retreattime"></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="退住类型">
          <el-col :span="11">
            <el-select v-model="curBackdown.retreattype">
              <el-option
                  v-for="item in retreattypeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              >
              </el-option>
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item label="退住原因">
          <el-col :span="11">
            <el-input v-model="curBackdown.retreatreason"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="备注信息">
          <el-col :span="11">
            <el-input type="textarea" v-model="curBackdown.remarks"></el-input>
          </el-col>
        </el-form-item>
      </el-form>
      <el-button @click="optOne()">{{buttonOpt}}</el-button>
    </el-dialog>
  </div>
</template>

<script setup>
import {ref, onMounted, reactive} from "vue";
import http from '@/axios/http';
import qs from "qs";
// 存放退住记录数据集合
let backdownList = ref([]);

// 客户选项列表
let customerOptions = ref([]);

//报错提示
let errorMessage = ref("")

//模糊查询绑定的客户名称
let queryName = ref("")

//对话框显示控制
let backdownDialog = ref(false)

//退住信息，或者编辑已有退住记录的绑定数据
let curBackdown = ref({
  auditstatus: 1 // 默认审批状态为"同意"
});

//对话框的标题和操作按钮显示文字
let dialogTitle = reactive("")
let buttonOpt = reactive("")

//对话框操作类型：1：添加 2：编辑
let dialogOptType = reactive(1)
let size = 10; //当前显示多少行
let pageNum = 1; // 当前页码
let pageSize = 10; //每页显示行数

//当前页码信息
let pageContains = ref({})

//退住类型选项
let retreattypeOptions = ref([
  {
    label: '正常退住',
    value: 0
  },{
    label: '死亡退住',
    value: 1
  },{
    label: '保留床位',
    value: 2
  }
])

//根据客户姓名模糊查询退住记录
function queryByName(){
  let param = {
    customerName: queryName.value
  }

  http.post('/lyy/get_backdowns_by_name', param).then(
      (res)=>{
        let result = res.data;
        if(result.result === 'success'){
          backdownList.value = result.data;
        } else {
          errorMessage.value = result.error;
        }
      }
  )
}

//单击退住按钮事件
function showCheckOutDialog(){
  dialogTitle = "客户退住登记";
  buttonOpt="登记"
  //弹出退住信息对话框
  backdownDialog.value = true;
  dialogOptType = 1 //设置当前操作类型标志是录入
  //重置当前退住信息
  curBackdown.value = {
    auditstatus: 1 // 默认审批状态为"同意"
  };
  //获取所有客户选项
  getAllCustomerOptions();
}

//获取所有客户选项
function getAllCustomerOptions(){
  http.post('/lyy/get_all_customername').then(
      (res)=>{
        let result = res.data;
        if(result.result === 'success'){
          customerOptions.value = result.data;
        } else {
          errorMessage.value = result.error;
        }
      }
  )
}

//关闭退住信息对话框
function closeBackdownDialog(){
  backdownDialog.value = false;
}

//页面初始化
onMounted(
    ()=>{
      init();
    }
)

function init(){
  //查询所有退住记录
  getAllBackdowns();
}

//获取所有退住记录
function getAllBackdowns(){
  let params = ref({
    size: size,
    pageNum: pageNum,
    pageSize: pageSize
  })

  http.post('/lyy/get_all_backdowns', params.value).then(
      (res)=>{
        let result = res.data;
        if(result.result === 'success'){
          pageContains.value = result.data;
          backdownList.value = result.data.list;
        } else {
          errorMessage.value = result.error;
        }
      }
  )
}

//格式化日期
function formatDate(row, column){
  let data = row[column.property];

  if(data == null){
    return null;
  }

  let dt = new Date(data);
  return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate()
}

//添加退住记录
function recordOne(){
  let param = curBackdown.value;
  http.post('/lyy/add_one_backdown', param).then(
      (res)=>{
        let result = res.data;
        if(result.result === 'success'){
          //关闭对话框
          closeBackdownDialog()
          //刷新退住记录列表
          getAllBackdowns();
        } else {
          errorMessage.value = result.error;
        }
      }
  )
}

//显示编辑对话框
function showEditDialog(backdownId){
  //根据id查询退住记录
  getBackdownInfo(backdownId)
  //显示对话框
  backdownDialog.value = true;
  dialogTitle = "退住信息修改";
  buttonOpt="修改"
  dialogOptType = 2 //设置当前操作类型标志是修改
  //获取所有客户选项
  getAllCustomerOptions();
}

//根据ID获取退住记录信息
function getBackdownInfo(backdownId){
  let param = {
    backdownId: backdownId
  }
  http.post('/lyy/get_backdown_by_id', qs.stringify(param)).then(
      (res)=>{
        let result = res.data;
        if(result.result === 'success'){
          curBackdown.value = result.data;
        } else {
          errorMessage.value = result.error;
        }
      }
  )
}

//删除退住记录
function removeOne(backdownId){
  let param = {
    backdownId: backdownId
  }
  http.post('/lyy/remove_backdown_by_id', qs.stringify(param)).then(
      (res)=>{
        let result = res.data;
        if(result.result === 'success'){
          getAllBackdowns();
        } else {
          errorMessage.value = result.error;
        }
      }
  )
}

//编辑退住记录
function editOne(){
  let param = curBackdown.value;
  http.post('/lyy/modify_backdown_by_id', param).then(
      (res)=>{
        let result = res.data;
        if(result.result === 'success'){
          closeBackdownDialog();
          getAllBackdowns();
        } else {
          errorMessage.value = result.error;
        }
      }
  )
}

//根据操作类型执行对应的操作
function optOne(){
  if(dialogOptType === 1){
    recordOne()
  } else if(dialogOptType === 2) {
    editOne()
  }
}

//分页处理
const handlePageChange = (pageNum1)=>{
  pageNum = pageNum1
  getAllBackdowns()
}

const handleSizeChange = (pageSize1)=>{
  pageSize = pageSize1
  getAllBackdowns()
}
</script>

<style scoped>

</style> 